<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: components/dumb/marqueeLine.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: components/dumb/marqueeLine.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * 跑马灯
 * @class MarqueeLine
 * @memberof module:components/dumb
 * @example
 * import { marqueeLine } from 'path/to/components/dumb/marqueeLine'
 * export default {
 *     render: h => &lt;marquee-line speed={ 5 }>
 *         &lt;div>Hello World&lt;/div>
 *         &lt;div>a same dream&lt;/div>
 *     &lt;/marquee-line>
 * }
 */
const marqueeLine = {
    name: 'marqueeLine',
    /**
     * @lends module:components/dumb.MarqueeLine
     */
    props: {
        /**
         * @type {number}
         * @desc 移动速度
         */
        speed: {
            type: Number,
            default: 5
        }
    },
    data: () => ({
        marqueeId: 0
    }),
    render(h) { // eslint-disable-line no-unused-vars
        return (
            &lt;div class="marquee-line" ref="container">
                { this.$slots.default }
                { this.$slots.default }
            &lt;/div>
        );
    },
    mounted() {
        this.$nextTick(() => {
            const container = this.$refs.container;
            const children = container.querySelectorAll('div');
            const totalWidth = Array.from(children).reduce((sum, item) => sum += item.offsetWidth, 0);
            const speed = this.speed;
            const motion = () => {
                if (container.scrollLeft >= totalWidth - container.offsetWidth)
                    container.scrollLeft -= totalWidth - container.offsetWidth;
                else
                    container.scrollLeft += speed;

                window.requestAnimationFrame(motion);
            };

            window.requestAnimationFrame(motion);
        });
    }
};

export default marqueeLine;
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-components_containers.html">components/containers</a></li><li><a href="module-components_dumb.html">components/dumb</a></li><li><a href="module-constants_api.html">constants/api</a></li><li><a href="module-constants_http.html">constants/http</a></li><li><a href="module-net_httpProxy.html">net/httpProxy</a></li><li><a href="module-utils.html">utils</a></li></ul><h3>Classes</h3><ul><li><a href="module-components_containers.Welcome.html">Welcome</a></li><li><a href="module-components_dumb.MarqueeLine.html">MarqueeLine</a></li><li><a href="module-utils.QueryString.html">QueryString</a></li><li><a href="module-utils.Storage.html">Storage</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Thu Feb 09 2017 17:36:20 GMT+0800 (CST)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
